<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>货位管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>

        .el-tree {
            width: 150px;
            display: block;
            position: absolute;
            left: 0px;
            top: 130px;
        }

        #table {
            position: absolute;
            left: 130px;
            top: 110px;
        }
        .el-input{
            width: 100px;
        }
        #search{
            position: absolute;
            top: 0px;
            left: 0px;
        }

    </style>
</head>

<body>
<div id="big">
    <div id="search">
        货架编号:
        <el-input v-model="shelvesNo" placeholder="请输入货架编号"></el-input>
        货架编号:
        <el-input v-model="CargoNo" placeholder="请输入货架编号"></el-input>
        货位状态:
        <el-select v-model="CargoStatus" clearable placeholder="请选择活动区域">
            <el-option  label="有货"  :value="1"></el-option>
            <el-option  label="无货"  :value="0"></el-option>
        </el-select>

        <el-button type="primary" icon="el-icon-search" @click="butSearch">搜索</el-button>
    </div>

    <el-button @click="openDis" style="position: absolute;top: 50px;">添加仓库</el-button>

    <el-dialog title="save" :visible.sync="dialogFormVisible">
        <el-form :model="tCargo">

            仓库:
            <el-select v-model="tCargo.wareId" @change="storehouse(tCargo.wareId)" placeholder="请选择">
                <el-option
                        v-for="item in tMenuTree"
                        :key="item.wareNo"
                        :label="item.wareName"
                        :value="item.wareNo">
                </el-option>
            </el-select>

            区域:
            <el-select v-model="tCargo.damId" @change="area(tCargo.damId)" placeholder="请选择">
                <el-option
                        v-for="item in listTReservoir"
                        :key="item.goodsNo"
                        :label="item.goodsName"
                        :value="item.goodsNo">
                </el-option>
            </el-select>

            货架:
            <el-select v-model="tCargo.shelvesNo"  placeholder="请选择">
                <el-option
                        v-for="item in listTShelves"
                        :key="item.shelvesNo"
                        :label="item.mainProduct"
                        :value="item.shelvesNo">
                </el-option>
            </el-select>

            <el-form-item label="仓位编号">
                <el-input v-model="tCargo.catgoNo" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="商品名:">
                <el-input v-model="tCargo.product" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="创建时间">
                <el-col :span="11">
                    <el-date-picker type="datetime" placeholder="选择日期" v-model="tCargo.creatTime"
                                    style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>

            <el-form-item label="状态">
                <el-input v-model="tCargo.status" autocomplete="off"></el-input>
            </el-form-item>


            <el-form-item label="仓库描述">
                <el-input v-model="tCargo.batch" autocomplete="off"></el-input>
            </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible=false">取 消</el-button>
            <el-button type="primary" @click="saveComm">确 定</el-button>
        </div>
    </el-dialog>

    <!--    树形菜单-->
    <el-tree :data="tMenuTree" :props="defaultProps" width="180px" @node-click="handleNodeClick"></el-tree>

    <div id="table">
        <el-table
                :data="pageTCargo.records"
                tooltip-effect="dark"
                ref="selectOrgan"
                style="width: 100%"
        >
            <!--        @select="selectCheck"-->
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column
                    label="货位编号"
                    width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px" >{{ scope.row.catgoNo }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="货架编号"
                    width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.shelvesNo }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="货区名"
                    width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.damId }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="所属仓库"
                    width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.wareId }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="物品名称"
                    width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.product }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="创建时间"
                    width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.creatTime }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="状态"
                    width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.status }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="数量"
                    width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.num }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="详细地址"
                    width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.batch }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="small"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[1, 2, 3, 4, 5]"
                    :page-size="rows"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTCargo.total">
            </el-pagination>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#big',
        data: {
            // 树形菜单顶级
            tMenuTree: null,
            defaultProps: {
                children: 'listTReservoirCLs',
                label: 'wareName'
            },
            // 货架ID
            tShelvesNo: 1,
            //货区Id
            damId: 1,
            // 仓库ID
            wareId: 1,

            // 搜索input
            //货架编号
            shelvesNo:"",
            //货架编号
            CargoNo:"",
            //仓库状态
            CargoStatus:"",

            pageTCargo: [{
                records: {
                    catgoNo: '',
                    shelvesNo: '',
                    damId: 0,
                    wareId: 0,
                    product: '',
                    creatTime: '',
                    status: '',
                    address: '',
                    position: ''
                }
            }],
            rows: 1,
            current: 1,

            // save
            tCargo:{id:0,catgoNo:0,shelvesNo:0,damId:0,wareId:0,product:'',creatTime:'',status:'',batch:''},
            dialogFormVisible:false,

            //下拉菜单
            listTReservoir:null,
            listTShelves:null,
        },
        methods: {
            findPageTCargo: function () {
                axios.get('/tCargo/page?current=' + this.current + '&&rows=' + this.rows + "&&tShelvesNo=" + this.tShelvesNo + "&&damId=" + this.damId + "&&wareId=" + this.wareId).then(res => {
                    this.pageTCargo = res.data;
                    this.pageTCargo.records.forEach(tCar=>{
                        if (tCar.status=="1"){
                            tCar.status="有货";
                        }else {
                            tCar.status="无货";
                        }
                    })
                })
            },
            findTMenuTree: function () {
                axios.get('/tMenu/tree').then(res => {
                    this.tMenuTree = res.data;
                    this.tMenuTree.forEach(tMenu => {
                        tMenu.listTReservoirCLs.forEach(reser => {
                            reser['wareName'] = reser.goodsName;
                            reser['listTReservoirCLs'] = reser.listTShelvesCls;
                            reser.listTShelvesCls.forEach(she => {
                                she['wareName'] = she.mainProduct;
                            })
                        })
                    })
                })
            },
            handleNodeClick: function (data,index) {
                if (index.level == 3) {
                    this.shelvesNo="";
                    this.CargoNo="";
                    this.CargoStatus="",
                    this.rows = 1;
                    this.current = 1;
                    this.tShelvesNo = data.shelvesNo;
                    this.damId = data.dameId;
                    this.wareId = data.wareId;
                    this.findPageTCargo();
                }
            },
            handleSizeChange: function (rows) {
                this.rows = rows;
                if (this.shelvesNo==""&&this.CargoNo==""&&this.CargoStatus==""){
                    this.findPageTCargo();
                }else {
                    this.butSearch();
                }

            },
            handleCurrentChange: function (current) {
                this.current = current;
                if (this.shelvesNo==""&&this.CargoNo==""&&this.CargoStatus==""){
                    this.findPageTCargo();
                }else {
                    this.butSearch();
                }
            },
            butSearch:function () {
                axios.get('/tCargo/page/search?shelvesNo='+this.shelvesNo+'&&CargoNo='+this.CargoNo+'&&CargoStatus='+this.CargoStatus+'&&current='+ this.current + '&&rows=' + this.rows).then(res=>{
                    this.pageTCargo = res.data;
                    this.pageTCargo.records.forEach(tCar=>{
                        if (tCar.status=="1"){
                            tCar.status="有货";
                        }else {
                            tCar.status="无货";
                        }
                    })
                })
            },
            openDis:function () {
                this.tCargo={id:0,catgoNo:0,shelvesNo:0,damId:0,wareId:0,product:'',creatTime:'',status:'',batch:''};
                this.dialogFormVisible=true;
            },
            saveComm:function () {
                let date = new Date(this.tCargo.creatTime);
                this.tCargo.creatTime = date.valueOf();
                if (this.tCargo.id==0){
                    //添加
                    axios.post('/tCargo',this.tCargo).then(res=>{
                        if (res.data=='ok'){
                            this.findPageTCargo();
                            this.dialogFormVisible=false;
                        }
                    })
                }else {
                    //更新
                    axios.put('/tCargo',this.tCargo).then(res=>{
                        if (res.data=='ok'){
                            this.findPageTCargo();
                            this.dialogFormVisible=false;
                        }
                    })
                }
            },
            handleEdit:function (index,row) {
                let tt=JSON.parse(JSON.stringify(row));
                this.tCargo=tt;
                this.dialogFormVisible=true;
            },
            storehouse:function (data) {
                this.tMenuTree.forEach(tMenu=>{
                    if (tMenu.wareNo==data){
                        this.listTReservoir=tMenu.listTReservoirCLs;
                        return;
                    }
                })
            },
            area:function (data) {
                this.listTReservoir.forEach(tReservoir=>{
                    if (tReservoir.goodsNo==data){
                        this.listTShelves=tReservoir.listTShelvesCls;
                        return;
                    }
                })
            }
        },
        mounted() {
            this.findTMenuTree();
        }
    })
</script>
</body>
</html>